<template>
  <div>
    <!-- 固井质量合格率查询 -->
    <div class="headerstyle">固井质量合格率查询</div>
    <el-row>
        <!-- 查询栏 -->
        <el-form :inline="true" :model="searchModel">
          <el-col :sm="8" :md="8" :lg="4" :xl="3">
                <el-form-item>
                    <el-select v-model="searchModel.oilfield" clearable placeholder="请填写油区">
                         <el-option
                            v-for="item in oilfieldOptions"
                            :key="item"
                            :label="item"
                            :value="item"
                            :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :sm="8" :md="8" :lg="4" :xl="3">
                <el-form-item>
                    <el-input placeholder="请填写井号" v-model="searchModel.wellName" clearable maxlength="20" />
                </el-form-item>
            </el-col>
            <el-col :sm="8" :md="8" :lg="4" :xl="3">
                <el-form-item>
                    <el-select v-model="searchModel.wellCategory" clearable placeholder="请选择井别">
                         <el-option
                            v-for="item in wellTypeOptions"
                            :key="item"
                            :label="item"
                            :value="item"
                            :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :sm="8" :md="8" :lg="4" :xl="3">
                <el-form-item>
                    <el-select v-model="searchModel.cementCompany" clearable placeholder="请选择固井单位">
                        <el-option
                        v-for="item in cementingUnitOptions"
                        :key="item"
                        :label="item"
                        :value="item"
                        :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :sm="8" :md="8" :lg="4" :xl="3">
                <el-form-item>
                    <el-select v-model="searchModel.caseSize" clearable placeholder="请选择套管尺寸">
                        <el-option
                        v-for="item in caselevelOptions"
                        :key="item"
                        :label="item"
                        :value="item"
                        :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
                    <el-button type="primary" @click="submitSearchModel" >查询</el-button>
			        <el-upload class="upload-demo" :http-request="importExcel" :show-file-list="false" action="">
			            <el-button type="success" >导入</el-button>
			        </el-upload>
			        <el-button type="primary" @click="DownLoadModel">模板下载</el-button>
        </el-form>
    </el-row>
    <!-- 查询结果表格展示 -->
    <div class="headerstyle">查询统计信息表1</div>
    <el-row style="width: 100%">
        <el-table
            :data="tableData"
            border
            style="width: 100%; font-size: 10px; margin-bottom: 10px"
            :max-height="tableHeight"
            :header-row-style="rowStyle"
            :header-cell-style="cellStyle"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            stripe
        >
          <el-table-column 
            v-for="item in tableHead"
            :label="item.label"
            :prop="item.property"
            :key = item.id
            align="center"> 
          </el-table-column>
    </el-table>
    <!-- 图表统计显示 -->
    <div class="headerstyle">统计表</div>
    <el-row>
      <div id="countChart"></div>
    </el-row>
    <!-- 显示表格 -->
    <!-- 查询结果表格展示 -->
    <div class="headerstyle">查询统计信息表2</div>
    <el-table
        class="bigtable"
        :data="tableDataBig"
        border
        style="width: 100%; font-size: 10px"
        :max-height="tableHeight"
        :header-row-style="rowStyle"
        :header-cell-style="cellStyle"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        stripe>
         <el-table-column type="index" label="序号" width="50" align="center">
                <template slot-scope="scope">
                    <span>{{ (pageIdx - 1) * pageSize + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
      <el-table-column 
        v-for="item in tableHeadBig"
        :label="item.label"
        :prop="item.property"
        :key = item.id
        align="center"> 
          <template v-if="item.children || item.children.length > 0">
              <el-table-column 
                v-for="item1 in item.children"
                :label="item1.label" 
                :prop="item1.property"
                :key="item1.id"
                align="center">
                <template v-if="item1.children || item1.children.length > 0">
                  <el-table-column 
                  v-for="item2 in item1.children"
                  :label="item2.label" 
                  :prop="item2.property"
                  :key="item2.id"
                  align="center"/>
                </template>
            </el-table-column>
        </template>
      </el-table-column>
    </el-table>
    <!-- 显示页数 -->
    <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="pageIdx"
            :page-size="pageSizes"
            :total="totalData"
            @current-change="handlePageChange"
        ></el-pagination>
    </div>
    </el-row>
  </div>
</template>

<script>
import {
	ListDataDictByCondition
} from '../../../api/module/dataClassification/data_classification'
import {
	CementQualityQualifiedSearchAndStatistics
} from '../../../api/module/statisticalAnalysis/CementingQualityPassRate'
import { importExcel, downTemplateExcel } from '../../../api/module/dataClassification/excel.js'
import * as echarts from 'echarts'
export default {
    data() {
        return {
            menuName: this.$route.query.menuName,  //页面跳转获取的页面名称
            //查询行的数据
            searchModel: {
              caseSize: "",
              cementCompany: "",
              oilfield: "",
              wellCategory: "",
              wellName: ""
            },
            currentPage: 1,
            pageSize: 7,
            //下拉框字典
            wellTypeOptions: [], //井型
            wellClassesOptions: [], // 井别
            caselevelOptions: [], //套管层次
            cementingUnitOptions: [],//固井单位
            oilfieldOptions: [],
            //表格数据
            tableHead: [{
              id: 0,
              label: "",
              property: "name",
            }, {
              id: 1,
              label: "一界面优质率",
              property: "goodrateproductinterface1",
            }, {
              id: 2,
              label: "一界面合格率",
              property: "passrateproductinterface1",
            }, {
              id: 3,
              label: "二界面优质率",
              property: "goodrateproductinterface2",
            }, {
              id: 4,
              label: "二界面合格率",
              property: "passrateproductinterface2",
            }, {
              id: 5,
              label: "一二界面综合评价优质率",
              property: "goodrateproductinterface12",
            }, {
              id: 6,
              label: "一二界面综合评价合格率",
              property: "passrateproductinterface12",
            }],
            tableData: [{
              name: "平均值",
              goodrateproductinterface1: "",
              goodrateproductinterface2: "",
              goodrateproductinterface12: "",
              passrateproductinterface1: "",
              passrateproductinterface2: "",
              passrateproductinterface12: ""
            }],
             //大表格数据
           tableHeadBig: [{
                id: 1,
                label: "油区",
                property: "oilfield",
                children: []
              }, {
                id: 2,
                label: "井号",
                property: "wellname",
                children: []
              }, {
                id: 3,
                label: "井别",
                property: "wellcategory",
                children: []
              }, {
                id: 4,
                label: "井深",
                property: "",
                children: [
                  {
                    id: 1,
                    label: "设计",
                    property: "welldepth1",
                    children: []
                  }, {
                    id: 2,
                    label: "实际",
                    property: "welldepth2",
                    children: []
                  }
                  ]
              }, {
                id: 5,
                label: "生产套管固井质量指标",
                property: "",
                children: [{
                    id: 1,
                    label: "固井单位",
                    property: "",
                    children: [{
                        id: 1,
                        label: "名称",
                        property: "cementcompany",
                      }, {
                        id: 2,
                        label: "内部/外部",
                        property: "cementcompanyinout",
                    }]
                  }, {
                    id: 2,
                    label: "钻头尺寸(mm)",
                    property: "bitsize",
                    children: []
                  }, {
                    id: 3,
                    label: "套管尺寸(mm)",
                    property: "casesize",
                    children: []
                  }, {
                    id: 4,
                    label: "下深(m)",
                    property: "downDepth",
                    children: []
                  }, {
                     id: 5,
                     label: "固井方式",
                     property: "cementmethod",
                     children: []
                  }, {
                    id: 6,
                    label: "水泥返高(m)",
                    property: "",
                    children: [{
                        id: 1,
                        label: "设计",
                        property: "returnheightdesign",
                      }, {
                        id: 2,
                        label: "实际",
                        property: "returnheighttrue",
                      }, {
                        id: 3,
                        label: "实际与设计返高差值", 
                        property: "returnheighttrue",
                      }, {
                        id: 4,
                        label: "按红线判定是否合格", 
                        property: "passreturnredline",
                      }]
                  }, {
                     id: 7,
                     label: "油气水层段及其以上25m", 
                     property: "",
                     children: [{
                          id: 1,
                          label: "一界面是否合格", 
                          property: "passoilinterface1",
                      }, {
                          id: 2,
                          label: "二界面是否合格", 
                          property: "passoilinterface2",
                    }]
                  }, {
                     id: 8,
                     label: "尾管重合段及其以上25m", 
                     property: "",
                     children: [{
                          id: 1,
                          label: "一界面是否合格", 
                          property: "passupinterface1",
                      }, {
                          id: 2,
                          label: "二界面是否合格", 
                          property: "passupinterface1",
                    }]
                  }, {
                     id: 9,
                     label: "上层套管鞋处及其以上25m", 
                     property: "",
                     children: [{
                          id: 1,
                          label: "一界面是否合格", 
                          property: "passupinterface1",
                      }, {
                          id: 2,
                          label: "二界面是否合格", 
                          property: "passupinterface1",
                    }]
                  }, {
                     id: 10,
                     label: "上层套管分级箍处及其以上25m", 
                     property: "",
                     children: [{
                          id: 1,
                          label: "一界面是否合格", 
                          property: "passmediuminterface1",
                      }, {
                          id: 2,
                          label: "二界面是否合格", 
                          property: "passmediumupinterface2",
                    }]
                  }, {
                     id: 11,
                     label: "生产套管固井胶结质量", 
                     property: "",
                     children: [{
                          id: 1,
                          label: "一界面优质率", 
                          property: "goodrateproductinterface1",
                      }, {
                          id: 2,
                          label: "一界面合格率", 
                          property: "passrateproductinterface1",
                      }, {
                          id: 3,
                          label: "二界面优质率", 
                          property: "goodrateproductinterface2",
                      }, {
                          id: 4,
                          label: "二界面合格率", 
                          property: "passrateproductinterface2",
                      }, {
                          id: 5,
                          label: "一二界面综合评价优质率", 
                          property: "goodrateproductinterface12",
                      }, {
                          id: 6,
                          label: "一二界面综合评价合格率", 
                          property: "passrateproductinterface12",
                      }, {
                          id: 7,
                          label: "是否合格", 
                          property: "passproduct",
                    }]
                  }, {
                    id: 12,
                    label: "入井套管或固井用水泥及外加剂质量", 
                    property: "",
                    children: [{
                          id: 1,
                          label: "是否合格", 
                          property: "passmaterial",
                      }, {
                          id: 2,
                          label: "不合格项目", 
                          property: "notpassmaterial",
                    }]
                  }, {
                    id: 13,
                    label: "生产套管试压是否合格", 
                    property: "pressurepass",
                    children: []
                  }, {
                    id: 14,
                    label: "按红线判定是否合格",
                    property: "passred",
                    children: []
                }]
              }, {
                id: 6,
                label: "备注",
                property: "note",
                children: []
              }], 
           tableDataBig: [],

            //分页条数据
            pageIdx: 1,
            pageSizes: 8,
            totalData: 0,
            //table展示数据（样式）
            tableHeight: this.$route.query.tableHeight,
            rowStyle: { height: '30px' },
            cellStyle: {
              padding: 0
            },
            //编辑框数据
            editVisible: false,
            form: {},//每行数据
            idx: -1,//修改行id
            //图表数据
            countChartData : {
              legend: {},
              tooltip: {},
              dataset: {
                  source: [
                      ['product', '平均值'],
                      ['一界面优质率', 23],
                      ['一界面合格率', 15],
                      ['二界面优质率', 12],
                      ['二界面合格率', 10],
                      ['一二界面综合评价优质率', 22],
                      ['一二界面综合评价合格率', 24],
                  ]
              },
              xAxis: {type: 'category'},
              yAxis: {},
              series: [
                  // These series are in the first grid.
                  {type: 'bar', seriesLayoutBy: 'row'},
                  {type: 'bar', seriesLayoutBy: 'row'},
                  {type: 'bar', seriesLayoutBy: 'row'},
                  {type: 'bar', seriesLayoutBy: 'row'},
                  {type: 'bar', seriesLayoutBy: 'row'},
                  {type: 'bar', seriesLayoutBy: 'row'},
              ]
          }
        }
    },
    created() {
        // console.log("menuName: " + this.$route.query.menuName)
        //开始查询表数据
        //获取下拉框
        this.ListDataDictByCondition()
        this.CementQualityQualifiedSearchAndStatistics1()
    },
    mounted() {
    },
    methods: {        
		//excel导入数据
			importExcel(item) {
			    const formData = new FormData();
			    formData.append('file', item.file);
			    importExcel(formData, "CementQualityExcelOperationStrategy") //传入导入表的名称
			        .then((res) => {
			            console.log('导入成功');
			             this.$message.success('导入数据成功！')
			            console.log(res);
			            this.CementQualityQualifiedSearchAndStatistics(); //查询该表
			        })
			        .catch(err=>{
			             console.log('导入失败');
			        console.log(err)
			    });
			},
		    //下载模板
		    DownLoadModel() {
		        //下载excel模板
		        downTemplateExcel('cement_quality').then((res) => {
		            console.log(res);
		            if (!res) {
		                return;
		            }
		            const link = document.createElement('a');
		            let blob = new Blob([res]);
		            link.style.display = 'none';
		            link.href = URL.createObjectURL(blob);
		            link.setAttribute('download', '完成井固井质量资料统计表模板-汇总.xlsx');
		            document.body.appendChild(link);
		            link.click();
		            document.body.removeChild(link);
		        });
		    },
        ListDataDictByCondition() {
            //获取井型下拉列表
            ListDataDictByCondition("井型")
            .then(res => {
                // console.log(res.data)
                this.wellClassesOptions = res.data
            })
            //获取井别下拉列表
            ListDataDictByCondition("井别")
            .then(res => {
                // console.log(res.data)
                this.wellTypeOptions = res.data
            })
            //获取油区下拉列表
            ListDataDictByCondition('油田')
            .then((res) => {
                this.oilfieldOptions = res.data;
            })
            .catch((err) => {
                console.log('获取油田列表失败：');
                console.log(err);
            })
            //固井单位
            ListDataDictByCondition("固井单位")
            .then(res => {
                // console.log(res.data)
                this.cementingUnitOptions = res.data
            })
            //获取套管层次 
            ListDataDictByCondition("套管层次")
            .then(res => {
                // console.log(res.data)
                this.caselevelOptions = res.data
            })

        },
        //初始查询数据
        CementQualityQualifiedSearchAndStatistics1() {
            CementQualityQualifiedSearchAndStatistics({},this.currentPage,this.pageSize)
            .then(res => {
                console.log(res)
                let data = res.data.statisticsDto
                this.tableData[0].goodrateproductinterface1 = data.goodrateproductinterface1
                this.tableData[0].goodrateproductinterface2 = data.goodrateproductinterface2
                this.tableData[0].goodrateproductinterface12 = data.goodrateproductinterface12
                this.tableData[0].passrateproductinterface1 = data.passrateproductinterface1
                this.tableData[0].passrateproductinterface2 = data.passrateproductinterface2
                this.tableData[0].passrateproductinterface12 = data.passrateproductinterface12
                //获取数据
                this.countChartData.dataset.source[1][1] = this.tableData[0].goodrateproductinterface1
                this.countChartData.dataset.source[2][1] = this.tableData[0].goodrateproductinterface2
                this.countChartData.dataset.source[3][1] = this.tableData[0].goodrateproductinterface12
                this.countChartData.dataset.source[4][1] = this.tableData[0].passrateproductinterface1
                this.countChartData.dataset.source[5][1] = this.tableData[0].passrateproductinterface2
                this.countChartData.dataset.source[6][1] = this.tableData[0].passrateproductinterface12
                
                this.echartshow();
                this.tableDataBig = res.data.cementQualitys.list
                this.totalData = res.data.cementQualitys.total
                // console.log(this.tableDataBig)
            })
        },
        //查询数据
        CementQualityQualifiedSearchAndStatistics() {
          CementQualityQualifiedSearchAndStatistics(this.searchModel,this.currentPage,this.pageSize)
          .then(res => {
            console.log(res)
            let data = res.data.statisticsDto
            this.tableData[0].goodrateproductinterface1 = data.goodrateproductinterface1
            this.tableData[0].goodrateproductinterface2 = data.goodrateproductinterface2
            this.tableData[0].goodrateproductinterface12 = data.goodrateproductinterface12
            this.tableData[0].passrateproductinterface1 = data.passrateproductinterface1
            this.tableData[0].passrateproductinterface2 = data.passrateproductinterface2
            this.tableData[0].passrateproductinterface12 = data.passrateproductinterface12
            //获取数据
            this.countChartData.dataset.source[1][1] = this.tableData[0].goodrateproductinterface1
            this.countChartData.dataset.source[2][1] = this.tableData[0].goodrateproductinterface2
            this.countChartData.dataset.source[3][1] = this.tableData[0].goodrateproductinterface12
            this.countChartData.dataset.source[4][1] = this.tableData[0].passrateproductinterface1
            this.countChartData.dataset.source[5][1] = this.tableData[0].passrateproductinterface2
            this.countChartData.dataset.source[6][1] = this.tableData[0].passrateproductinterface12
            
            this.echartshow();
            this.tableDataBig = res.data.cementQualitys.list
            this.totalData = res.data.cementQualitys.total
            console.log(this.tableDataBig)
          })
        },
        //图标显示
        echartshow() {
            let countCharte = this.$echarts.init(document.getElementById('countChart'));
            countCharte.setOption(this.countChartData);
        },
        //点击查询
        submitSearchModel () {
            this.pageIdx = 1
            this.currentPage = 1
            this.CementQualityQualifiedSearchAndStatistics()
            this.$message.success('查询数据成功！')
        },
        // 分页导航
        handlePageChange(page) {
            this.pageIdx = page
            this.currentPage = page
            this.CementQualityQualifiedSearchAndStatistics()
        }
    }
}
</script>

<style>
.headerstyle {
    font-size: 17px;
    background-color: #eef0f6;
    height: 30px;
    padding: 5px 10px;
    margin-bottom: 10px;
}
#countChart {
    height: 500px;
    width: 60%;
   
}
.upload-demo {
       display: inline-block;
       width: 68px;
       height: 100%;
       margin-left: 0px;
}
/* .el-upload {
    display:none; 
    text-align:inherit; 
    cursor:default; 
    outline: 0;
} */
.upload-demo>.el-upload--text.el-upload{
    background-color: #fff;
    border: 0px dashed #d9d9d9;
    border-radius: 6px;
    /* -webkit-box-sizing: border-box; */
    box-sizing: border-box;
    width: 100%;
    height: 100%; 
    text-align: center;
    cursor: pointer; 
    position: initial;
    overflow: initial; 
}
</style>